<template>
  <div class="members-wrap">
    <p>请直接复制excel表格中数据，按QQ、昵称顺序，粘贴到方框中。</p>
    <textarea
      cols="40"
      rows="10"
      style="height: 100px"
      v-model="importText"
    ></textarea>
    <div>
      <Button size="small" type="primary" @click="doImportMembers()"
        >导入</Button
      >
      <Button
        size="small"
        type="primary"
        class="mar10l"
        @click="doImportMembers(true)"
        >清空+导入</Button
      >
    </div>
    <br />
    <table class="table table3">
      <tr>
        <th>排列</th>
        <th>
          编号
          <TablePoptip>
            <ul>
              <li>
                <a @click="resetNO">生成编号</a>
              </li>
            </ul>
          </TablePoptip>
        </th>
        <th>昵称</th>
        <th>QQ</th>
        <th>
          其他名称
          <TablePoptip>
            <ul>
              <li>
                <a @click="makeSubNames">生成一下</a>
              </li>
            </ul>
          </TablePoptip>
        </th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr
        v-for="(item, index) in members"
        :key="'member_' + index"
        :class="{ gray: item.isLeave }"
      >
        <td align="center">{{ index + 1 }}</td>
        <td align="center">{{ item.no }}</td>
        <td>
          {{ item.nickname }}
        </td>
        <td>{{ item.qq }}</td>
        <td>{{ item.subnames }}</td>
        <td align="center">{{ item.isLeave ? "离开" : "" }}</td>
        <td align="center">
          <a @click="showPeopleWorks(item)">查看全部作业</a>
          <a class="mar10l" @click="startSetSubNames(item)">设置别名</a>
          <a class="mar10l" title="设置离开状态" @click="setLeaveStatus(index)"
            >离开</a
          >
          <a class="red pointer mar10l" @click="delMember(index)">删除</a>
        </td>
      </tr>
    </table>
    <ModalPeopleWorks
      :list="[]"
      :people="showWorkPeople"
      :showAll="true"
      v-if="isShowPeopleWork"
      @close="isShowPeopleWork = false"
    ></ModalPeopleWorks>
    <div v-if="isSetSubNames">
      <Modal footer-hide v-model="isSetSubNames" title="导入作业">
        <Form :label-width="80">
          <FormItem label="设置成员">
            {{ setMember.nickname }}({{ setMember.qq }})
          </FormItem>
          <FormItem label="内容">
            <Input type="textarea" :rows="4" v-model="subNamesText"></Input>
          </FormItem>
          <FormItem>
            <Button @click="doSaveSubNames">设置</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script>
import ModalPeopleWorks from "@/components/ModalPeopleWorks.vue";
import { parseTen } from "js/utils.js";
export default {
  data() {
    return {
      importText: "",
      members: [],
      isShowPeopleWork: false,
      showWorkPeople: {},

      isSetSubNames: false,
      setMember: {},
      subNamesText: "",
    };
  },
  methods: {
    // 导入分析的成员
    doImportMembers(isClear) {
      if (!this.importText) {
        this.$global.log("请输入想导入的用户");
        return;
      }
      let members = this.$store.getters.getMembers();
      if (isClear) {
        members = [];
      }
      let memberObj = {};
      for (let item of members) {
        memberObj[item.qq] = 1;
      }
      let list = this.importText.split("\n");
      for (let i = 0, n = list.length; i < n; i++) {
        let str = list[i];
        let arr = [];
        if (str.includes("\t")) {
          arr = str.split("\t");
        } else if (str.includes(",")) {
          arr = str.split(",");
        }
        let qq = "";
        let nickname = "";
        for (let j = 0, m = arr.length; j < m; j++) {
          let str2 = arr[j].trim();
          if (!str2) {
            continue;
          }
          let num = parseInt(str2);
          if (!qq && !isNaN(num)) {
            qq = str2;
          } else if (!nickname) {
            nickname = str2;
          }
        }
        if (memberObj[qq]) {
          continue;
        }
        members.push({
          nickname: nickname,
          qq: qq,
          isLeave: false,
          no: "",
          subnames: "",
        });
      }
      this.members = members;
      this.resetNO();
      this.importText = "";
    },
    updateCache() {
      this.$store.commit("saveMembers", this.members);
    },
    // 删除
    delMember(index) {
      let val = confirm("你确认要删除吗？");
      if (!val) {
        return;
      }
      this.members.splice(index, 1);
      this.updateCache();
    },
    // 设置离开状态
    setLeaveStatus(index) {
      let isLeave = !!this.members[index].isLeave;
      let val = confirm("你确定要设置离开状态吗？");
      if (!val) {
        return;
      }
      this.members[index].isLeave = !isLeave;
      this.$set(this.members[index], "isLeave", !isLeave);
      this.$set(this.members, index, this.members[index]);
      this.updateCache();
    },
    // 生成编号
    resetNO() {
      let num = 0;
      for (let i = 0, n = this.members.length; i < n; i++) {
        num += 1;
        let no = parseTen(num) + "";
        this.members[i].no = no;
        this.$set(this.members[i], "no", this.members[i].no);
        this.$set(this.members, i, this.members[i]);
      }
      this.updateCache();
    },
    // 查看全部作业
    showPeopleWorks(item) {
      this.showWorkPeople = item;
      this.isShowPeopleWork = true;
    },
    // 设置别名
    makeSubNames() {
      for (let i = 0, n = this.members.length; i < n; i++) {
        let member = this.members[i];
        let nickname = member.nickname;
        let index = nickname.lastIndexOf("]");
        nickname = nickname.substr(index + 1);
        index = nickname.lastIndexOf("-");
        nickname = nickname.substr(0, index);
        let subnames = nickname.split("-").filter((str) => str);
        member.subnames = subnames.join(",");
        this.members[i].subnames = member.subnames;
      }
      this.updateCache();
    },
    startSetSubNames(item) {
      this.setMember = item;
      this.subNamesText = item.subnames;
      this.isSetSubNames = true;
    },
    doSaveSubNames() {
      for (let i = 0, n = this.members.length; i < n; i++) {
        let member = this.members[i];
        if (member.qq === this.setMember.qq) {
          this.members[i].subnames = this.subNamesText;
          break;
        }
      }
      this.updateCache();
      this.isSetSubNames = false;
    },
  },
  mounted() {
    let list = this.$store.getters.getMembers();
    this.members = list;
    new this.$tableSelect(".members-wrap .table");
  },
  components: {
    ModalPeopleWorks,
  },
};
</script>

<style></style>
